//  颜色类
$color_main: #2563eb;
$color_main_bg: #F9F9FC;
//  动画/渐变类
$custom_transition: all .3s ease-in-out;
//  字体类
$fontSize_small: .8rem;
$fontSize: 1rem;
$fontSize_large: 1.3rem;
//  间距类
$sidePadding: 20px;
//  布局
$borderRadius: 8px;
@mixin flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
//  滚动条样式
@mixin scrollStyle {
    &::-webkit-scrollbar {
        width: 4px;
    }
    &:hover::-webkit-scrollbar-thumb {
        background-color: rgba(#666, .5);
        // background-color: rgba(178, 185, 196, 1);
    }
    &:hover::-webkit-scrollbar-track {
        background-color: rgba(178, 185, 196, 1);
    }
}
//  悬浮显示滚动条
@mixin hoverShowScrollBar {
    @include scrollStyle;
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: transparent;
    }
}

//  元素禁止选中
@mixin forbiddenSelect {
    user-select: none;
}

//  常规按钮
@mixin customButtonBasic {
    padding: 8px 16px;
    background-color: $color_main;
    color: white;
    border: none;
    border-radius: $borderRadius;
    cursor: pointer;
    font-size: $fontSize_small;
    transition: background-color 0.2s ease;
    &:hover {
        background-color: darken($color_main, 10%);
    }
    
    &:active {
        background-color: darken($color_main, 15%);
    }
}